<template>
  <!-- 视图 -->
  <div class="jd">
    {{ age }}
    <h2>{{ arr }}</h2>
    <!-- <h2>{{ person }}</h2> -->
    <h2>{{ pepole }}</h2>
    <h2>{{ hobby }}</h2>
    <h2>{{ person }}</h2>
    <h2>{{ data.pepole }}</h2>
    <button v-on:click="addAge">年龄+1</button>
    <button v-on:click="changeArr">修改数据</button>
    <button v-on:click="changePersonName">修改数据</button>
    <button v-on:click="changePepoleName">修改数据</button>
    <button v-on:click="changeHobby">修改数据</button>
    <button v-on:click="changeDataPerson">修改数据</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
//数据  ref  一般用在基本类型的数据 数值  bool  字符串
// reactive :只生命对象类型的响应式数据，不能声明基本类型的数据
//响应式数据：数据变了，视图要变
let age = ref(20)
let arr = ref(['吃', '喝', '谁'])
// let person = ref({
//   name: '张三',
//   age: 30
// })
let pepole = reactive({
  name: '李小双',
  sex: 'man'
})

let hobby = reactive(['逛街', '打扮'])

let data = reactive({
  person: {
    name: '张三',
    age: 20,
    hobby: ['逛街', '打扮']
  },
  pepole: {
    name: '李里',
    age: 28,
    hobby: ['上学', '打扮']
  },
  list: []
})

let { person } = toRefs(data)

//函数
const addAge = () => {
  console.log(age)

  // age.value = age.value + 1
  // console.log(age.value)
}
const changeArr = () => {
  arr.value[0] = '美美'
}

const changePersonName = () => {
  person.value.name = '李四'
}
const changePepoleName = () => {
  pepole.name = '李大双'
}

const changeHobby = () => {
  hobby[0] = '吃饭'
}
const changeDataPerson = () => {
  person.value.name = '刘德华'
}
</script>

<style scoped></style>
